Coffee School

Code Editor

// Creating environment variables var playerSize = 10; var sceneWidth = 300, sceneHeight = 150; // Create the variables to track player movement var playerVel = 0; // Stores the player's velocity var g = 0.4; // The constant acceleration cause by "gravity" // Create our player's base entity Crafty.e("2D, DOM, Color") // Specifying the components to add .attr({x: 30, y: 30, w: playerSize, h: playerSize}) // Specifying the dimensions and the point to draw from .color("#ff0000") // Specifying the colour of the rectangle .bind("EnterFrame", function() { // Binds the "EnterFrame" event to the entity if(this.y < 0) { playerVel = g; // Prevent the player from going above the game screen } else { playerVel += g; // Adds the "gravitational acceleration" to the player's velocity } this.y += playerVel; // Change the player entities y position based on the player velocity }) .bind("KeyDown", function(event) { // Binds the "KeyDown" event to our player entity if(event.key == Crafty.keys.SPACE){ // If the key is the spacebar then "flap" playerVel = -5; // Sets the player's speed and direction to go upwards } });

Preview

Console Log:

Part 1: Creating the Ground

Time estimate for Part 1: 5 minutes

Goal: Draw the ground

To create our ground we’re going to use a rectangular entity similar in a similar vein to the base player avatar we used, however we can make use of the scene variables that we created at the end of the last lesson.

The code to draw the ground entity is the following, and we’ll place it before our code for the player:

Crafty.e("Solid, 2D, DOM, Color") // Adding the Solid, 2D, DOM and Color components
    .attr({x: 0,
           y: playAreaHeight,// We haven't yet declared this value.
           w: sceneWidth,    // This was declared earlier when getting rid of "hard coded" values
           h: groundHeight}) // Bear with us on these undeclared variables!
    .color("#00ff00");

You may have noticed that a Solid component has been added to the ground here. This component will allow us to check for collisions with our player later on.

The entity which we have written code for isn’t yet valid, as we haven’t declared the playeAreaHeight or groundHeight variables yet. We should fix this and create them so that our code is valid.

Let’s place the groundHeight and playAreaHeight variables at the top of our JavaScript along with the other game and scene variables. For our ground height we’re going to use a value of 10 pixels (but feel free to play about with this later!).

var groundHeight = 10;

Now the other variable, the playAreaHeight, is the area between the top of the ground and the top of the game scene. So to set the playAreaHeight we’re going to use our value for groundHeight which means we must place it after the groundHeight variable, resulting in something like this:

var groundHeight = 10;
var playAreaHeight = (sceneHeight - groundHeight);

You may have noticed that while our ground entity starts with an x coordinate of 0, we set it’s y coordinate to playAreaHeight. This is a result of the coordinate system having (0,0) as the top left corner of the scene, as mentioned earlier.

We’ve made the values of the attributes for the ground variables because as you’ll see shortly we want to reuse these values when creating our obstacles! (That way we can be lazy if we need to make a change to a value later and only change it once. The best kind of lazy).